<template>
  <a-breadcrumb class="breadcrumb">
    <a-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
      <router-link 
        v-if="item.path && !item.disabled && index < breadcrumbList.length - 1" 
        :to="item.path"
        class="breadcrumb-link"
      >
        <component v-if="item.icon" :is="item.icon" class="breadcrumb-icon" />
        {{ item.title }}
      </router-link>
      <span v-else class="breadcrumb-current">
        <component v-if="item.icon" :is="item.icon" class="breadcrumb-icon" />
        {{ item.title }}
      </span>
    </a-breadcrumb-item>
  </a-breadcrumb>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue';
import { useRoute } from 'vue-router';
import type { BreadcrumbItem } from '../types/router';

const route = useRoute();

// 面包屑列表
const breadcrumbList = computed<BreadcrumbItem[]>(() => {
  const matched = route.matched.filter(item => item.meta?.breadcrumb !== false);
  const breadcrumbs: BreadcrumbItem[] = [];

  matched.forEach((routeRecord, index) => {
    const meta = routeRecord.meta as any;
    
    // 跳过隐藏的路由
    if (meta?.hidden) return;

    const breadcrumb: BreadcrumbItem = {
      title: meta?.title || routeRecord.name as string || '未知页面',
      path: index < matched.length - 1 ? routeRecord.path : undefined,
      icon: meta?.icon,
      disabled: index === matched.length - 1
    };

    breadcrumbs.push(breadcrumb);
  });

  return breadcrumbs;
});

// 监听路由变化，更新面包屑
watch(
  () => route.path,
  () => {
    // 可以在这里添加面包屑变化的逻辑
  },
  { immediate: true }
);
</script>

<style scoped>
.breadcrumb {
  margin: 16px 0;
  padding: 0 24px;
}

.breadcrumb-link {
  color: #1890ff;
  text-decoration: none;
  transition: color 0.3s;
}

.breadcrumb-link:hover {
  color: #40a9ff;
}

.breadcrumb-current {
  color: rgba(0, 0, 0, 0.45);
  font-weight: 500;
}

.breadcrumb-icon {
  margin-right: 4px;
  font-size: 14px;
}

.breadcrumb-link .breadcrumb-icon {
  color: #1890ff;
}

.breadcrumb-current .breadcrumb-icon {
  color: rgba(0, 0, 0, 0.45);
}
</style>
